<template>
	<view class="container">
		<!-- 状态栏 -->
		<view :class="statusBarViewClass"></view>
		<!-- 导航栏 -->
		<view class="customer-nav-view">
			<view class="customer-nav-left">
				<image class="logo-img" mode="aspectFill" :src="logo_img"></image>
			</view>
			<view class="customer-nav-center" @click="goSearchPage">
				<uni-icons type="search" color='#666666' size="18"></uni-icons>
				<text>搜索 丨 去发现</text>
			</view>
			<view class="customer-nav-right" @click="goFavoriteMovPage">
				<uni-icons type="star" color='#FF4F80' size="24"></uni-icons>
			</view>
		</view>
		<view class="video-query-view" id="stkRef">
			<!-- 影视类型 -->
			<view class="video-selected-view">
				<view v-for="item, index in video_type_list" :key="index">
					<view
						:class="['video-selected-item', queryParam.typeId == item.id?'video-selected-item-selected':'']"
						@click="switchVideoType(item.id)">
						{{ item.name }}
					</view>
				</view>
			</view>
			<!-- 排序 -->
			<view class="video-selected-view">
				<view v-for="item, index in video_sortType_list" :key="index">
					<view
						:class="['video-selected-item', queryParam.sortType == item.id?'video-selected-item-selected':'']"
						@click="switchSortType(item.id)">
						{{ item.name }}
					</view>
				</view>
			</view>
			<!-- 影视分类 -->
			<view class="video-selected-view" v-if="video_category_list.length > 2">
				<view :class="['video-selected-item', queryParam.categoryId == 0?'video-selected-item-selected':'']"
					@click="switchCategory(0)">
					分类
				</view>
				<view v-for="item, index in video_category_list">
					<view
						:class="['video-selected-item', queryParam.categoryId == item.id?'video-selected-item-selected':'']"
						@click="switchCategory(item.id)">
						{{ item.name }}
					</view>
				</view>
			</view>
			<!-- 地区 -->
			<view class="video-selected-view" v-if="video_country_list.length > 2">
				<view :class="['video-selected-item', queryParam.country == '地区'?'video-selected-item-selected':'']"
					@click="switchCountry('地区')">
					地区
				</view>
				<view v-for="item, index in video_country_list" :key="index">
					<view
						:class="['video-selected-item', queryParam.country == item.name?'video-selected-item-selected':'']"
						@click="switchCountry(item.name)">
						{{ item.name }}
					</view>
				</view>
			</view>
			<!-- 上映年份 -->
			<view class="video-selected-view">
				<view :class="['video-selected-item', queryParam.releaseTime == '0'?'video-selected-item-selected':'']"
					@click="switchReleaseTime('0')">
					年份
				</view>
				<view v-for="item, index in video_releaseTime_list" :key="index">
					<view
						:class="['video-selected-item', queryParam.releaseTime == item.id?'video-selected-item-selected':'']"
						@click="switchReleaseTime(item.id)">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<!-- 影视列表 -->
		<view class="video-list-view">
			<view class="video-list-content" v-if="video_list.length > 0">
				<view class="video-list-item" v-for="item,index in video_list" @click="goMovDetailPage(item)"
					:key="index">
					<!-- 或者 aspectFill -->
					<image class="video-list-item-img" mode="aspectFit"
						:src="item.image.toLowerCase().startsWith('http')?item.image:(api.host+item.image)">
					</image>
					<text class="video-list-item-name"> {{item.name}} </text>
					<text class="video-list-item-other">
						<uni-dateformat :date="item.modifyTime" format="yyyy-MM-dd"></uni-dateformat> </text>
				</view>
			</view>
			<view class="video-list-content-empty" v-else>
				暂无数据
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		nextTick
	} from 'vue'
	import {
		onPullDownRefresh,
		onReachBottom,
		onPageScroll,
		onLoad
	} from '@dcloudio/uni-app'
	import api from '@/config/api'
	import request from '@/utils/request'
	import {
		showToast,
		getUserId,
		getUserInfo,
		getUserToken
	} from '@/utils/utils'

	const logo_img = ref("/static/image/logo.png")

	const maxTop = ref(0)
	const statusBarViewClass = ref("status-bar-view-1")


	const video_type_list = ref([{
		id: 2,
		name: '电影'
	}]) // 影视类型列表
	const video_sortType_list = ref([{
			id: 1,
			name: '最新'
		},
		{
			id: 4,
			name: '最新更新'
		},
		{
			id: 2,
			name: '热门播放'
		},
		{
			id: 3,
			name: '高分推荐'
		},
		{
			id: 0,
			name: '最早发布'
		}
	])
	const video_category_list = ref([{
		id: 0,
		name: '分类'
	}])
	const video_country_list = ref([{
		id: 0,
		name: '地区'
	}])
	const video_releaseTime_list = ref([{
		id: '0',
		name: '年份'
	}])
	const video_list = ref([])
	// 0 允许加载 1 没有数据了，停止加载 2 进行中
	const isOver = ref(0)
	const queryParam = ref({
		token: getUserToken(),
		pageNum: 1,
		pageSize: 15,
		sortType: 1,
		actressId: 0,
		typeId: 2,
		categoryId: 0,
		country: '地区',
		tagId: 0,
		searchKey: '',
		releaseTime: '0',
	})

	onLoad(() => {
		getVideoTypeList()
		getCategoryList()
		getCountry()
		getReleaseTimeList()
		getDataList()
	})

	onMounted(() => {
		// 渲染完立即记录stkRef的距离
		nextTick(() => {
			const query = uni.createSelectorQuery().in(this); // 创建查询
			query.select('#stkRef').boundingClientRect((data) => {
				if (data) {
					maxTop.value = data.top
				}
			}).exec();
		})
	})

	onPageScroll((e) => {
		// 监听stkRef距离，控制状态栏样式
		if (e.scrollTop + 5 > maxTop.value) {
			if (statusBarViewClass.value == "status-bar-view-1") {
				statusBarViewClass.value = "status-bar-view-2"
			}
		} else {
			if (statusBarViewClass.value == "status-bar-view-2") {
				statusBarViewClass.value = "status-bar-view-1"
			}
		}
	})

	// 下拉刷新
	onPullDownRefresh(() => {
		// 重置页码
		queryParam.value.pageNum = 1
		isOver.value = 0
		// 加载数据
		getDataList()
		// 停止下拉刷新动画
		uni.stopPullDownRefresh()
	})

	// 上拉加载下一页
	onReachBottom(() => {
		nextPage()
	})

	// 获取影视列表数据
	const getDataList = () => {
		isOver.value = 2
		request.get(api.host + api.videoListUrl, queryParam.value).then(result => {
			let new_mov_list = result.data
			if (queryParam.value.pageNum === 1) {
				video_list.value = []
				if (new_mov_list.length == 0) {
					isOver.value = 1
					showToast('没有数据')
				} else if (new_mov_list.length > 0 && new_mov_list.length < queryParam.value.pageSize) {
					isOver.value = 1
					showToast('已全部加载完毕')
				} else {
					isOver.value = 0
				}
				// 先清空列表，等渲染完了，再赋值列表
				nextTick(() => {
					video_list.value = new_mov_list
				})
			} else {
				video_list.value.push(...new_mov_list)
				if (new_mov_list.length < queryParam.value.pageSize) {
					isOver.value = 1
					showToast('已全部加载完毕')
				} else {
					isOver.value = 0
				}
			}
		})
	}

	// 下一页
	const nextPage = () => {
		if (isOver.value === 1) {
			showToast('没有更多了')
			return
		} else if (isOver.value === 2) {
			showToast('正在加载中')
			return
		}
		queryParam.value.pageNum = queryParam.value.pageNum + 1
		getDataList()
	}

	// 获取影视类型
	const getVideoTypeList = () => {
		request.get(api.host + api.videoTypeListUrl).then(result => {
			video_type_list.value = result.data
		})
	}

	// 获取影视分类
	const getCategoryList = () => {
		request.get(api.host + api.videoCategoryListUrl, {
			movieTypeId: queryParam.value.typeId,
		}).then(result => {
			video_category_list.value = result.data
		})
	}

	// 获取影视地区
	const getCountry = () => {
		request.get(api.host + api.videoCountryListUrl, {
			movieTypeId: queryParam.value.typeId
		}).then(result => {
			video_country_list.value = result.data
		})
	}

	// 获取视频上映时间列表
	const getReleaseTimeList = () => {
		let now = new Date();
		let new_list = []
		for (let i = 0; i < 10; i++) {
			let year = String((now.getFullYear() - i));
			new_list.push({
				id: year,
				name: year
			});
			if (i === 9) {
				let lastYear = String((now.getFullYear() - 10)) + '-以前'
				new_list.push({
					id: lastYear,
					name: '其他'
				});
			}
		}
		video_releaseTime_list.value = new_list
	}

	// 切换视频类型
	const switchVideoType = (typeId) => {
		isOver.value = 0
		queryParam.value.typeId = typeId
		queryParam.value.pageNum = 1
		queryParam.value.sortType = 1
		queryParam.value.categoryId = 0
		queryParam.value.country = '地区'
		queryParam.value.releaseTime = '0'
		getCategoryList()
		getCountry()
		getDataList()
	}
	// 切换排序
	const switchSortType = (id) => {
		queryParam.value.sortType = id
		queryParam.value.pageNum = 1
		isOver.value = 0
		getDataList()
	}
	// 切换分类
	const switchCategory = (id) => {
		queryParam.value.categoryId = id
		queryParam.value.pageNum = 1
		isOver.value = 0
		getDataList()
	}
	// 切换地区
	const switchCountry = (name) => {
		queryParam.value.country = name
		queryParam.value.pageNum = 1
		isOver.value = 0
		getDataList()
	}
	// 切换年份
	const switchReleaseTime = (id) => {
		queryParam.value.releaseTime = id
		queryParam.value.pageNum = 1
		isOver.value = 0
		getDataList()
	}

	// 前往搜索页面
	const goSearchPage = () => {
		uni.navigateTo({
			url: '/pages/mov_search/mov_search'
		})
	}

	// 前往详情页面
	const goMovDetailPage = (item) => {
		uni.navigateTo({
			url: '/pages/mov_detail/mov_detail?movieId=' + item.id + '&num=0',
		})
	}

	// 前往我的收藏或者登陆
	const goFavoriteMovPage = () => {
		if (getUserId() > 0) {
			uni.navigateTo({
				url: '/pages/favorite/favorite'
			})
		} else {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}

	}
</script>

<style lang="scss">
	@import url("mov_list.css");
</style>